<template>
  <FModal ref="refFModal" width="1000" @ok="ok" header="请选人">
    <FPage class="user-select-modal">
      <template #header class="user-select-modal-header">
        <el-tabs class="default-form-list-tab simple-line-tabbs" v-model="activeName">
          <el-tab-pane v-for="item in realPanelConfig"
                       class="user-select-modal-panel" :name="item.name" :label="item.label"/>
        </el-tabs>
      </template>

      <div class="user-select-modal-body">
        <div class="user-select-modal-body-left">
          <DepartUserSelector @addUser="addUser" :defaultUnitId="defaultUnitId" v-if="activeName === 'depart'"/>
          <PositionUserSelector @addUser="addUser" :defaultUnitId="defaultUnitId" v-if="activeName === 'position'"/>
          <PositionLevelUserSelector @addUser="addUser" :defaultUnitId="defaultUnitId"
                                     v-if="activeName === 'positionLevel'"/>
        </div>
        <div style="width: 10px"/>
        <div class="user-select-modal-body-right">
          <FListV2 :data-source="selectedUserList" @doubleClick="removeUser"
                   title-name="realname" size="small" key-name="id"/>
        </div>
      </div>
    </FPage>
  </FModal>
</template>
<script setup>
import FModal from '@/components/FModal/index.vue';
import {computed, ref, shallowRef} from 'vue';
import {isEmpty, isNotEmpty, real} from '@/utils/CommonUtils';
import DepartUserSelector from '@/components/SingleUserSelector/DepartUserSelector.vue';
import {useStore} from 'vuex';
import FListV2 from '@/components/FListV2/index.vue';
import FPage from '@/components/layout/FPage.vue';
import PositionUserSelector from '@/components/SingleUserSelector/PositionUserSelector.vue';
import PositionLevelUserSelector from '@/components/SingleUserSelector/PositionLevelUserSelector.vue';

const emits = defineEmits(['ok']);
const selectedUserList = ref([]);
const activeName = shallowRef();
const props = defineProps({
  tabsConfig: {
    type: Array,
    default: () => []
  },
  multiple: {
    type: Boolean,
    default: true
  }
});
const allPanels = [
  {name: 'depart', label: '部门'},
  {name: 'position', label: '岗位'},
  {name: 'positionLevel', label: '职务级别'},
];
const store = useStore();

const defaultUnitId = computed(() => {
  return store.getters['user/userInfo'].unitId;
});
const realPanelConfig = computed(() => {
  let configs = props.tabsConfig;
  if (isEmpty(configs)) return [];
  let res = [];
  configs.forEach(con => {
    let temp = allPanels.find(pan => pan.name === con.name);
    if (isNotEmpty(temp)) {
      res.push({
        ...temp, ...con
      });
    }
  });
  return res;
});

const refFModal = shallowRef();

function ok() {
  emits('ok', real(selectedUserList));
  refFModal.value.close();
}

function addUser(user) {
  let temp = real(selectedUserList).find(u => u.id === user.id);
  if (isNotEmpty(temp)) return;

  selectedUserList.value.push(real(user));
  if (props.multiple === false) {
    selectedUserList.value = [real(user)];
  }
}

function removeUser(user) {
  let index = real(selectedUserList).findIndex(u => u.id === user.id);
  if (index !== -1) {
    selectedUserList.value.splice(index, 1);
  }
}

function setData(users) {
  if (isNotEmpty(users)) {
    users = real(users);
    selectedUserList.value = users;
  }
  refFModal.value.open();
  toDefaultPanel();
}

function toDefaultPanel() {
  try {
    activeName.value = props.tabsConfig[0].name;
  } catch (e) {
  }
}

defineExpose({
  setData
});
</script>
<script>
export default {
  name: 'UserSelectModal'
};
</script>
<style>
.user-select-modal {
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.f-modal-body .user-select-modal {
}

.f-modal-fullscreen-body .user-select-modal {
  height: 100%;
}

.f-modal-small-body .user-select-modal-body {
  height: 600px;
}

.f-modal-fullscreen-body .user-select-modal-body {
  height: 100%;
}

.user-select-modal .user-select-modal-body {
  flex: 1;
  display: flex;

}

.user-select-modal-panel {
  height: 5px;
}

.user-select-modal-header .el-tabs__header {
  padding: 0;
  margin: 0;
}

.user-select-modal-body .user-select-modal-body-left,
.user-select-modal-body .user-select-modal-body-right {
  background: white;
  flex: 1;
  border: 1px solid #f0f2f5;
  box-sizing: border-box;
}
</style>
